import React, { useEffect, useState } from 'react'
import { useRef } from 'react'
import './centent.css'
//引入图片
import a1 from '../../assets/image/非机动车未带头盔识别系统_nor.png'
import a2 from '../../assets/image/非机动车未带头盔识别系统_hov.png'
import s1 from '../../assets/image/交通事故智能定位分析系统_nor.png'
import s2 from '../../assets/image/交通事故智能定位分析系统_hov.png'
import d1 from '../../assets/image/交通安全画像系统_nor.png'
import d2 from '../../assets/image/交通安全画像系统_hov.png'
import f1 from '../../assets/image/可视化作战平台_nor.png'
import f2 from '../../assets/image/可视化作战平台_hov.png'
import g1 from '../../assets/image/停车卡口接入系统_nor.png'
import g2 from '../../assets/image/停车卡口接入系统_hov.png'
import k1 from '../../assets/image/支队平台系统本地化应用_nor.png'
import k2 from '../../assets/image/支队平台系统本地化应用_hov.png'



export const content = () => {
  const box = useRef<any>(null)
  let [arr, setArr] = useState([
    {
      id: 1,
      blurImg: a1,
      yellowImg: a2,
      text: '非机动车未带头盔识别系统',
      isBlue: true
    },
    {
      id: 2,
      blurImg: s1,
      yellowImg: s2,
      text: '交通事故智能定位分析系统',
      isBlue: true
    },
    {
      id: 3,
      blurImg: d1,
      yellowImg: d2,
      text: '交通安全画像系统',
      isBlue: true
    },
    {
      id: 4,
      blurImg: f1,
      yellowImg: f2,
      text: '可视化作战平台',
      isBlue: true
    },
    {
      id: 5,
      blurImg: g1,
      yellowImg: g2,
      text: '停车卡口接入系统',
      isBlue: true
    },
    {
      id: 6,
      blurImg: k1,
      yellowImg: k2,
      text: '支队平台系统本地化应用',
      isBlue: true
    }
  ])
  // let [att,setAtt] = useState([
  //   {
  //     id:1,
  //     img:''
  //   }
  // ])
  //遍历
  useEffect(() => {
    for (let i = 0; i < box.current.children.length; i++) {
      box.current.children[i].style['animation-delay'] = `${-5 - i * 3.3}s,-${i * 3.3}s,-${i * 3.3}s`
    }
  },[box])
  // 移入移出
  const over = (id: number) => {
    console.log(id);
    let obj = arr.find(item => item.id === id)!
    // console.log(obj.isBlue,'8888');
    obj.isBlue = !obj.isBlue
    // console.log(obj.isBlue,'9999');
    for (let i = 0; i < box.current.children.length; i++) {
      box.current.children[i].style['animation-play-state'] = obj.isBlue ? 'running' : 'paused'
    }
    setArr(JSON.parse(JSON.stringify(arr)))
  }
  const onclick = (text: string) => {
    alert(text)
  }
  return (
    <div className='content' ref={box}>
      {
        arr && arr.map((item, index) => {
          return <div className='boxItem' key={index} onClick={() => onclick(item.text)} onMouseEnter={() => over(item.id)} 
          onMouseLeave={() => over(item.id)}>
            <img src={item.isBlue ? item.blurImg:item.yellowImg} />
            <p>{item.text}</p>
          </div>
        })
      }
      
    </div>

  )
}

export default content